<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>登录</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./static/css/layui.css" media="all">
  <link rel="stylesheet" href="./static/css/common.css">
  <style>
    .box {
      width: 100%;
      height: 100%;
      background: #f1f3f7;
      display: flex;
      align-items: center;
    }

    .main {
      height: 500px;
      display: flex;
      align-items: center;
    }

    .form-panel {
      padding: 50px 60px;
    }

    .form-title {
      text-align: center;
      padding: 0;
      margin: 0 0 20px 0;
    }

    .code-message {
      font-size: 14px;
      font-weight: normal;
      text-align: center;
      padding-bottom: 5px;
      color: red;
    }

    .m-panel {
      border-radius: 10px;
    }

  </style>
</head>
<body>
<div class="box layui-col-md12 layui-col-xs12">
  <div class="main layui-col-md6 layui-col-xs6 layui-col-md-offset4 layui-col-xs-offset4">
    <div class="layui-row">
      <div class="layui-panel m-panel">
        <div class="form-panel">
          <h2 class="form-title">职工管理系统</h2>
          <h2 class="code-message"><span id="code-message-box"></span></h2>
          <form method="post" class="layui-form">
            <div class="layui-form-item">
              <label class="layui-form-label" for="name">用户名：</label>
              <div class="layui-input-block">
                <input type="text" name="name" id="name" lay-verify="name|required" autocomplete="off"
                       placeholder="请输入用户名" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label" for="password">密码：</label>
              <div class="layui-input-block">
                <input type="password" name="password" id="password" lay-verify="password|required" autocomplete="off"
                       placeholder="请输入密码" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label" for="code">验证码：</label>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input type="text" name="code" id="code" placeholder="请输入验证码" lay-verify="required|code"
                         autocomplete="off"
                         class="layui-input">
                </div>
                <button type="button" class="layui-btn layui-btn-normal" id="getCodeBtn">获取验证码</button>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="./static/layui.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  <script>
    layui.use(['form', 'jquery', 'layer'], () => {
      let form = layui.form,
        $ = layui.$,
        layer = layui.layer;

      let code;
      let time;
      //自定义验证规则
      form.verify({
        name(val) {
          if (val.length < 2 || val.length > 16) {
            return "用户名长度在2到16个字符";
          }
        }
        , password: [
          /^[\S]{6,16}$/
          , '密码必须6到16位，且不能出现空格'
        ],
        code(val) {
          if (time < 0) {
            return "验证码过期，请重新获取";
          }
          if (val != code) {
            return "验证码不正确，请检查";
          }
        }
      });

      //监听提交
      form.on('submit(demo1)', data => {
        console.log(data.field);
        $.post("login/employee", data.field, data => {
          if (data.code == 200) {
            console.log(data.data);
            window.localStorage.setItem("user", JSON.stringify(data.data));
            swal({
              title: "提示",
              text: data.message,
              icon: "success"
            }).then(() => {
              location.href = "http://localhost:8080/StaffManagement/";
            })
          } else {
            swal({
              title: "提示",
              text: data.message,
              icon: "error"
            })
          }
        })
        return false;
      });

      $("#getCodeBtn").bind("click", () => {
        if (time > 0) {
          layer.msg("您的操作太频繁，请稍后再试")
          return;
        }
        time = 30;
        $.get("login/code", "", data => {
          if (data.code == 200) {
            code = data.data;
            let timeCode = setInterval(() => {
              let msg = "您的验证码为：" + code + "将在 " + time + "秒后过期;"
              $("#code-message-box").html(msg)
              time--;
              if (time < 0) {
                clearInterval(timeCode);
                $("#code-message-box").html("")
              }
            }, 1000);
          }
        })
      })
    });
  </script>
</div>
</body>
</html>